<template>
  <div class="checkout-address">
    <div class="text">
      <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
      <ul>
        <li>
          <span>收<i />货<i />人：</span
          >{{ addresslist[nowindex] && addresslist[nowindex].receiver }}
        </li>
        <li>
          <span>联系方式：</span
          >{{ addresslist[nowindex] && addresslist[nowindex].contact }}
        </li>
        <li>
          <span>收货地址：</span
          >{{ addresslist[nowindex] && addresslist[nowindex].address }}
        </li>
      </ul>
      <span @click="placeedit">修改地址</span>
    </div>
    <div class="action">
      <button class="btn" @click="placeshow = true">切换地址</button>
      <button class="btn" @click="show = true">添加地址</button>
    </div>

    <Checkoutdilog title="添加地址" :show1="show">
      <div class="address-edit">
        <div class="xtx-form">
          <div class="xtx-form-item">
            <div class="label">收货人：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入收货人"
                v-model="form.receiver"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">手机号：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入手机号"
                v-model="form.contact"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地区：</div>
            <div class="field">
              <city-view
                :fullCityData="fullCityData"
                @setFullData="changeFullData"
              >
              </city-view>
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">详细地址：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入详细地址"
                v-model="form.address"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">邮政编码：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入邮政编码"
                v-model="form.postalCode"
              />
            </div>
          </div>
          <div class="xtx-form-item">
            <div class="label">地址标签：</div>
            <div class="field">
              <input
                class="input"
                placeholder="请输入地址标签，逗号分隔"
                v-model="form.addressTags"
              />
            </div>
          </div>
        </div>
      </div>
      <template v-slot:footer>
        <button type="gray" style="margin-right: 20px" @click="show = false">
          取消
        </button>
        <button type="primary" @click="placeadd">确认</button>
      </template>
    </Checkoutdilog>

    <Checkoutdilog title="切换收货地址" :show2="placeshow">
      <div class="text item" v-for="(item, key) in addresslist" :key="item.id">
        <ul @click="placedizhixuan(key)">
          <li>
            <span>收<i />货<i />人：</span>{{ item.receiver }}
          </li>
          <li><span>联系方式：</span>{{ item.contact }}</li>
          <!-- {{ item.fullCityData.replace(/ /g, '') + item.address }} -->
          {{
            item.addressTags
          }}
          <li><span>收货地址：</span></li>
        </ul>
      </div>
      <template v-slot:footer>
        <button
          type="gray"
          style="margin-right: 20px"
          @click="placeshow = false"
        >
          取消
        </button>
        <button type="primary" @click="placeshow = false">确认</button>
      </template>
    </Checkoutdilog>
  </div>
</template>
<script>
import Checkoutdilog from "./checkoutdilog.vue";
import CityView from "@/components/utils/CityView.vue";
import { placemapapi, placeadedit } from "@/utils/api/placexiadan";
// import Checkoutdilog from './checkoutdilog.vue';

export default {
  props: ["nowindex", "addresslist"],
  data() {
    return {
      // index: 0,
      // addresslist: [],
      show: false,
      placeshow: false,
      fullCityData: {
        procode: null,
        proname: "北京市",
        citycode: null,
        cityname: "市县区",
        coucode: null,
        couname: "东城区",
      },
      form: {
        receiver: "", //收货人
        contact: "", //手机号
        address: "", //详细地址
        postalCode: "", //邮政编码
        addressTags: "", //地址标签
        provinceCode: "", //省
        cityCode: "", //城市
        countyCode: "", //所在的县
        isDefault: 1, //默认
      },
    };
  },
  methods: {
    placedizhixuan(key) {
      this.nowindex = key;
      this.placeshow = false;
    },
    changeFullData(obj) {
      this.fullCityData = obj;
    },
    async placeadd() {
      var obj = {
        receiver: this.form.receiver,
        contact: this.form.contact,
        address: this.form.address,
        postalCode: this.form.postalCode,
        addressTags: this.form.addressTags,
        provinceCode: this.fullCityData.proname,
        cityCode: this.fullCityData.cityname,
        countyCode: this.fullCityData.couname,
      };
      let res = await placemapapi(obj);
      console.log(res);
      if ((res.code = "17010")) {
        this.$message({ text: "最多能添加10个收货地址", type: "error" });
      }
      if ((res.msg = "操作成功")) {
        this.$message({ text: "添加成功", type: "success" });
        this.show = false;
      }
    },
    placeedit() {
      var obj = {
        address: "翻斗花园14栋",
        addressTags: "1196",
        cityCode: "140700",
        contact: "13711339644",
        countyCode: "140740",
        isDefault: 0,
        postalCode: "030611",
        provinceCode: "140000",
        receiver: "王泽宙--",
      };
      var id = "1607617392235573249";
      placeadedit(id, obj);
    },
  },

  components: { Checkoutdilog, CityView, Checkoutdilog },
};
</script>
<style lang="scss">
@import "@/assets/css/variables.scss";

.checkout-address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    > ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    > a {
      color: $xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.xtx-dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;

      &.active,
      &:hover {
        border-color: $xtxColor;
        background: lighten($xtxColor, 50%);
      }

      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }

  :deep(.wrapper) {
    width: 780px;

    .body {
      font-size: 14px;
    }
  }

  &.fade {
    transition: all 0.4s;
    background: rgba(0, 0, 0, 0.5);
  }

  .wrapper {
    width: 600px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    opacity: 1;

    &.fade {
      transition: all 0.4s;
      transform: translate(-50%, -50%);
      opacity: 1;
    }

    .body {
      padding: 20px 40px;
      font-size: 16px;

      .icon-warning {
        color: $priceColor;
        margin-right: 3px;
        font-size: 16px;
      }
    }

    .footer {
      text-align: center;
      padding: 10px 0 30px 0;
    }

    .header {
      position: relative;
      height: 70px;
      line-height: 70px;
      padding: 0 20px;
      border-bottom: 1px solid #f5f5f5;

      h3 {
        font-weight: normal;
        font-size: 18px;
      }

      a {
        position: absolute;
        right: 25px;
        top: 25px;
        font-size: 24px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #999;

        &:hover {
          color: #666;
        }
      }
    }
  }
}

.xtx-form {
  padding: 0;

  input {
    outline: none;

    &::placeholder {
      color: #ccc;
    }
  }
}

.xtx-city {
  width: 320px;

  :deep(.select) {
    height: 50px;
    line-height: 48px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;

    .placeholder {
      color: #ccc;
    }

    i {
      color: #ccc;
      font-size: 18px;
    }

    .value {
      font-size: 14px;
    }
  }

  :deep(.option) {
    top: 49px;
  }
}
</style>